<template>
  <!-- 配件签收 -->
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="'85'" :collapse="false" @filterChange="changeHandle"></TopFilter>
    <!-- 列表展示 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="partPartInventoryPartSignIndex"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <!-- <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="verificationOrderClick">详细</el-button>
      </template>-->
    </FilterTable>

    <!-- 货运单签收/详情 -->
    <BaseDialog :visible.sync="signOfVisible" :title="partOrderTitle" :width="'900px'" destroyOnClose :containerStyle="{ height: 'calc(100% - 50px)', overflow: 'auto', paddingBottom: '60px' }">
      <EditPartOrderSign
        :id="selectBillId"
        :billNo="selectedBillNo"
        :isView="signIsView"
        :billSignDate="billSignDate"
        @reSearchTable="handleResearchTable"
        @close="closeSignWayBill"
      ></EditPartOrderSign>
    </BaseDialog>

    <!-- 货运单详细 -->
    <BaseDialog :visible.sync="detailVisible" :title="partOrderTitle" :width="'900px'" destroyOnClose :containerStyle="{ height: 'calc(100% - 50px)', overflow: 'auto', paddingBottom: '60px' }">
      <PartOrderDetail></PartOrderDetail>
    </BaseDialog>

    <!-- 签收货运单-核销确认 -->
    <BaseDialog :visible.sync="verificationVisible" :title="partOrderTitle" :width="'900px'" destroyOnClose :containerStyle="{ height: 'calc(100% - 50px)', overflow: 'auto', paddingBottom: '60px' }">
      <VerificationOrder></VerificationOrder>
    </BaseDialog>

    <!-- 选择发货单 -->
    <BaseDialog :visible.sync="orderSelectVisible" title="选择发货单" destroyOnClose :containerStyle="{ height: 'calc(100% - 50px)', overflow: 'auto', paddingBottom: '60px' }">
      <Fahuodan orderType="80881003" @confirm="confirmFahuodan" @cancel="orderSelectVisible = false"></Fahuodan>
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getWayBillList } from '@/api/part/partInventory/partSign';

import moment from 'moment';
import EditPartOrderSign from './editPartOrderSign';
import PartOrderDetail from './partOrderDetail';
import VerificationOrder from './verificationOrder';
import Fahuodan from '@/pages/part/partInventory/partInventory/components/fahuodan';

export default {
  name: 'part_partInventory_partSign',
  components: {
    EditPartOrderSign,
    PartOrderDetail,
    VerificationOrder,
    Fahuodan
  },
  mixins: [dictionary],
  props: {},
  data() {
    return {
      topFilterList: this.createTopFilterList(), // 查询字段
      columns: this.createTableColumns(), // 列表字段
      fetchParams: { xhrAbort: true },
      fetchApi: getWayBillList,
      partOrderTitle: '',
      signOfVisible: false, // 货运单签收是否显示
      signIsView: false, // 货运单签收是否是查看详细状态
      detailVisible: false, // 货运单详细是否显示
      verificationVisible: false, // 签收单确认是否显示
      orderSelectVisible: false, // 是否显示发货单选择弹窗
      selectedBillNo: '', // 选中的订单编号
      selectBillId: '', // 选中的订单id
      billSignDate: '' // 订单签收时间
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '发货单号',
          fieldName: 'billNo',
          placeholder: '请输入发货单号'
          // readonly: true
          // unitRender: () => {
          //   return (
          //     <el-button
          //       icon="el-icon-search"
          //       onClick={() => {
          //         this.orderSelectVisible = true;
          //       }}
          //     ></el-button>
          //   );
          // }
        },
        {
          type: 'RANGE_DATE',
          label: '发货日期',
          fieldName: 'deliveryTimeFrom|deliveryTimeTo',
          initialValue: [
            moment(new Date())
              .subtract(1, 'months')
              .format('YYYY-MM-DD'),
            moment(new Date()).format('YYYY-MM-DD')
          ],
          placeholder: '选择日期',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '签收状态',
          fieldName: 'signStatus',
          itemList: this.createDictList(9709)
        }
      ];
    },
    // 列表字段
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 180,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" disabled={!!(props.row.signStatus == 97091002)} onClick={props.row.signStatus == 97091001 ? () => this.editPartOrderSign(props.row) : false}>
                  {props.row.signStatus == 97091001 ? '签收' : '已签收'}
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.detailClick(props.row)}>
                  货运单详细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '发货单号',
          dataIndex: 'vbeln',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '订单配件总数量',
        //   dataIndex: 'orderqty',
        //   sorter: true
        // },
        {
          title: '发货配件总数量',
          dataIndex: 'lfimg',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        // {
        //   title: '签收总数量',
        //   dataIndex: 'SIGN_COUNT',
        //   width: 150,
        //   sorter: true
        // },
        {
          title: '入账总数量',
          dataIndex: 'inCount',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '总金额',
          dataIndex: 'amount',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        // {
        //   title: '总运费',
        //   dataIndex: 'FREIGHT_CHARGE',
        //   width: 150,
        //   sorter: true
        // },
        {
          title: '发货日期',
          dataIndex: 'erdat',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '签收时间',
          dataIndex: 'signDate',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        // {
        //   title: '是否核销',
        //   dataIndex: 'IS_VERIFICATION',
        //   width: 150,
        //   sorter: true
        // },
        // {
        //   title: '核销日期',
        //   dataIndex: 'VERIFICATION_DATE',
        //   width: 150,
        //   sorter: true
        // },
        // {
        //   title: '核销备注',
        //   dataIndex: 'VERIFICATION_REMARK',
        //   width: 150,
        //   sorter: true
        // },
        {
          title: '发货单备注',
          dataIndex: 'vtext',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      // console.log(val);
      this.fetchParams = Object.assign({}, { xhrAbort: false }, val);
      // this.$nextTick(() => {
      // this.fetchParams.xhrAbort = true;
      // });
    },
    // 发货单选择点击确定
    confirmFahuodan(e) {
      console.log(e);
      this.topFilterList.find(item => item.fieldName == 'billNo').initialValue = e[0].vbeln;
      this.orderSelectVisible = false;
    },
    // 签收
    editPartOrderSign(row) {
      this.selectedBillNo = row.vbeln + '';
      this.selectBillId = row.id + '';
      this.signIsView = false;
      this.signOfVisible = true;
      this.partOrderTitle = '货运单签收';
    },
    // 关闭签收货运单
    closeSignWayBill() {
      this.signOfVisible = false;
    },
    // 货运单详细
    detailClick(row) {
      // this.detailVisible = true;
      console.log('tests', '' + row.vbeln);

      this.selectedBillNo = '' + row.vbeln;
      this.signIsView = true;
      this.signOfVisible = true;
      this.billSignDate = row.signDate;
      this.partOrderTitle = '货运单详细';
    },
    // 核销
    verificationOrderClick() {
      this.verificationVisible = true;
      this.partOrderTitle = '签收货运单-核销确认';
    },
    // 重新查询table数据
    handleResearchTable() {
      this.fetchParams.xhrAbort = true;
      this.fetchParams.xhrAbort = false;
    }
  }
};
</script>
<style lang="less" scoped></style>
